<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拓普赋能大数据系统</title>
<!--设置是否为缩放模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script>
<!--echarts JS-->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<!-- 轮播swiper文件 -->
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<!--界面样式-->
<script src="js/visual.js"></script>
<script src="js/china.js"></script>
<script src="js/chartMap.js"></script>
<link rel="stylesheet" type="text/css" href="css/visual.css">
<link rel="stylesheet" href="./css/index.css">

<!-- 3D地球  startFlag-->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.62/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.62/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- 3D地球 endFlag-->
</head>

<body class="ksh">
	<div id="load">
		<div class="load_img"><!-- 加载动画 -->
			<img class="jzxz1" src="images/jzxz1.png">
			<img class="jzxz2" src="images/jzxz2.png">
		</div>
	</div>
	<div class="head_top">
		<img class="img-responsive" src="images/jcdsj_logo.gif">
		<span class="title">拓普云大数据中心</span>
	</div>
	<div class="visual">
		<div class="visual_left">
			<div class="visual_box">
				<div class="visual_title">
					<span>销量概览</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main1">
					
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>通讯模块市场份额</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main2">
					
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>赋能重点行业应用</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart sfzcll">
					<a>行业类型</a>
					<a>设备总数</a>
					<a>活跃数量</a>
					<div class="sfzcll_pos_box">
						<div class="sfzcll_box">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<label><img src="images/ksh35.png">公路运输</label>
							<div class="sfzcll_smallBk">
								<div class="ygl">
									<span>12000</span> 台
								</div>
							</div>
							<div class="sfzcll_smallBk">
								<div class="ygh">
									<span>11000</span> 台
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="sfzcll_box">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<label><img src="images/ksh36.png">海路运输</label>
							<div class="sfzcll_smallBk">
								<div class="ygl">
									<span>32000</span> 台
								</div>
							</div>
							<div class="sfzcll_smallBk">
								<div class="ygh">
									<span>24000</span> 台
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="sfzcll_box">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<label><img src="images/ksh35.png">重工机械</label>
							<div class="sfzcll_smallBk">
								<div class="ygl">
									<span>48000</span> 台
								</div>
							</div>
							<div class="sfzcll_smallBk">
								<div class="ygh">
									<span>36000</span> 台
								</div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<div class="visual_con">
			<div class="visual_conTop">
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3>今日激活设备数(台)</h3>
						<p class="activeDayAcc">450</p>
						<div class="conTop_smil">
							<a class="sz">日环比:<span>+1%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>今日活跃设备数(台)</h3>
						<p class="activeLiveAcc">628</p>
						<div class="conTop_smil">
							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3>累计激活(台)</h3>
						<p class="activeSunAcc">310720</p>
						<!-- <div class="conTop_smil">
							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div> -->
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>设备总数(台)</h3>
						<p class="totalDevice">517868</p>
						<!-- <div class="conTop_smil">
							<a class="null">null</a>
							<a class="sz">月环比:<span>+2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div> -->
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="visual_conBot">
				<img class="visual_conBot_l" src="images/ksh42.png">
				<img class="visual_conBot_2" src="images/ksh43.png">
				<img class="visual_conBot_3" src="images/ksh44.png">
				<img class="visual_conBot_4" src="images/ksh45.png">
				<div class="visual_chart_text">
					<h1>云服务+大数据</h1>
					<h2>拓普赋能大数据分析云服务站</h2>
				</div>
				<div class="visual_chart" id="main8"></div>
				<!-- <div id="cesiumContainer" class="fullSize visual_chart" style="background-image: url('./images/data08.png');background-repeat: no-repeat;background-size: cover;"></div> -->
				<div class="visual_conBot_bot">
					<div class="visualSssf_left">
						<h3>全球活跃分布Top10</h3>
						<a style="display:block">美国</a>
						<a class="active">中国</a>
						<a>英国</a>
						<a>德国</a>
						<a>日本</a>
						<a>印度</a>
						<a>加拿大</a>
						<a>巴西</a>
						<a>法国</a>
						<a>俄罗斯</a>
					</div>
					<div class="visualSssf_right">
						<div class="visualSssf_right_box" id="main5"></div>
						<div class="visualSssf_right_box" id="main6"></div>
						<div class="visualSssf_right_box" id="main7"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="visual_right">
			<div class="visual_box">
				<div class="visual_title">
					<span>设备型号占比</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper1 visual_chart">
					<div class="swiper-wrapper">
						<div class="swiper-slide"  id="main3"></div>
						<!-- <div class="swiper-slide"  id="main31"></div> -->
					</div>
				</div>
			</div>
			<div class="visual_box visualSfzsfl">
				<div class="visual_title">
					<span>终端覆盖分布</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main9">
					
				</div>
				<div class="visual_table">
	
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>用户企业覆盖</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper2 visual_chart">
					<div class="swiper-wrapper">
						<div class="swiper-slide"  id="main4"></div>
						<!-- <div class="swiper-slide"  id="main41"></div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<script type="text/javascript">
		$(function(){
			var activeDayAcc= 450;
			var activeLiveAcc= 628;
			var activeSunAcc= 310720;
			var totalDevice= 517868;
			setInterval(function(){
				var setp1= Math.ceil(Math.random()*10) ;
				activeSunAcc= activeSunAcc+setp1;
				activeDayAcc= activeDayAcc+setp1;
				$('.visual_conTop1 .activeDayAcc').text(activeDayAcc);
				$('.visual_conTop1 .activeSunAcc').text(activeSunAcc);
			},30000);

			setInterval(function(){
				var setp2= Math.ceil(Math.random()*10);
				activeLiveAcc= activeLiveAcc+setp2;
				totalDevice= totalDevice+setp2;
				$('.visual_conTop2 .activeLiveAcc').text(activeLiveAcc);
			},50000);

			setInterval(function(){
				var setp3= Math.ceil(Math.random()*10);
				totalDevice= totalDevice+setp3;
				$('.visual_conTop2 .totalDevice').text(totalDevice);
			},90000);

			var a=$('.visualSssf_left a')
			for(var i=0;i<a.length;i++){
				a[i].index=i;
				a[i].onclick=function(){
					for(var i=0;i<a.length;i++){
						a[i].className=''
						}
					this.className='active'
				}
			}

			var sfzcllH=$('.sfzcll_box').height()
			var sfzcllHtwo=sfzcllH-2
			$('.sfzcll_box').css('line-height',sfzcllH+'px')
			$('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')

			//删除加载动画
			$('#load').fadeOut(1000)
    		setTimeout(function(){    
    			$('#load').remove()
    		}
    		,1100);
		})

	// 销量概览
	var myChart1 = echarts.init(document.getElementById('main1'));
	myChart1.setOption(option1);
	
	// 市场份额占比
	var myChart2 = echarts.init(document.getElementById('main2'));
	myChart2.setOption(option2);

	// 设备型号占比
	var myChart3 = echarts.init(document.getElementById('main3'));
    myChart3.setOption(option3);

    // 国内覆盖分布
	var myChart4 = echarts.init(document.getElementById('main4'));
    myChart4.setOption(option4);

    //全国活跃分布TOP10
	var myChart5 = echarts.init(document.getElementById('main5'));
    myChart5.setOption(option5);
    var myChart6 = echarts.init(document.getElementById('main6'));
    myChart6.setOption(option6);
    var myChart7 = echarts.init(document.getElementById('main7'));
	myChart7.setOption(option7);
	
    //中间地图
	var myChart8 = echarts.init(document.getElementById('main8'));
	myChart8.setOption(option8);
	
    //用户企业覆盖
	var myChart9 = echarts.init(document.getElementById('main9'));
    myChart9.setOption(option9);
	
	</script>
</body>
</html>

